import { html } from 'nvagir'
import './TodoModal.less'

/**
 * @type {object}
 * @property {string} header - a head title for modal
 * @property {Function} onClose
 * @property {Function} onConfirm
 * @property {?Object} todo - todo data
 */
type delModalProps = {
  header: string
  onClose: VoidFunction
  onConfirm: () => void
}

const delModal = ({ header, onClose, onConfirm }: delModalProps) => {
  /**
   * When click the cancel or close button, close the Modal
   * @fires Click#handleClose
   */
  const handleClose = () => {
    el.dom.remove()
    onClose()
  }

  /**
   * When click the confirm button, get the form data and pass to onConfirm
   * @fires Click#handleConfirm
   */
  const handleConfirm = () => {
    el.dom.remove()
    onConfirm()
  }

  /**
   * @type {Object} el - An object that contains the outermost element(container).
   * @type {Object} doms - An object that contains some captured elements for control.
   *   e.g. Get data from these elements
   */
  const { el } = html<{ form: HTMLFormElement }>`
    <div class="addtodo-modal-wrap">
      <div class="addtodo-modal-content">
        <button
          n@click=${handleClose}
          class="addtodo-modal-close"
          type="button"
          aria-label="close"
        >
          <span class="addtodo-modal-close-icon">&#xe620;</span>
        </button>
        <div class="addtodo-modal-header">
          <div class="addtodo-modal-title">${header}</div>
        </div>
        <div class="addtodo-modal-footer">
          <button
            n@click=${handleClose}
            class="addtodo-btn addtodo-btn-cancel"
            type="button"
          >
            <span>取 消</span>
          </button>
          <button
            class="addtodo-btn addtodo-btn-confirm"
            type="submit"
            n@click=${handleConfirm}
          >
            <span>确 定</span>
          </button>
        </div>
      </div>
    </div>
  `

  document.body.append(el.dom)
  return el
}

export const delTodoModal = (delModalProps: Omit<delModalProps, 'header'>) => {
  delModal({
    header: '删除Todo',
    ...delModalProps,
  })
}

export const delPlanModal = (delModalProps: Omit<delModalProps, 'header'>) => {
  delModal({
    header: '删除Plan',
    ...delModalProps,
  })
}
